<template>
  <button 
    type="submit" 
    class="form-button"
    :class="buttonClass"
    :disabled="loading"
  >
    <span v-if="!loading"><slot></slot></span>
    <span v-else>
      <i class="fa fa-spinner fa-spin"></i>
      {{ loadingText }}
    </span>
  </button>
</template>

<script setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: '处理中...'
  },
  buttonClass: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.form-button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.1);
  position: relative;
  overflow: hidden;
}

.form-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(79, 70, 229, 0.2);
}

.form-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .form-button {
    padding: 0.875rem;
    font-size: 1rem;
  }
}
</style>